/*
 * @Author: hongbin
 * @Date: 2022-09-22 19:40:45
 * @LastEditors: hongbin
 * @LastEditTime: 2023-01-07 13:11:16
 * @Description:入口文件
 */

import { TD } from "./TD";
import * as THREE from "three";
import { OctreeCollider } from "./OctreeCollider";

init();

export function init() {
    const canvas = document.querySelector(".webgl") as HTMLCanvasElement;
    if (!canvas) throw new Error("not find canvas");
    canvas.style.background = "linear-gradient(45deg, #8f9ded, #4beda3cf)";
    const td = new TD({
        //抗锯齿 耗性能 除非辣眼睛或场景小物体少否则不开
        antialias: true,
        canvas,
    });
    td.addAxis();
    td.addStats();
    td.addGUI();
    // td.setBackground("#faa");
    td.transparentBackGround();
    td.listenResize();
    td.camera.position.set(30, 80, 120);
    td.frameByFrame();

    addBox(td);

    collider(td);
}

function collider(td: TD) {
    const Collider = new OctreeCollider(td.scene);
    Collider.showHelper();
}

function addBox(td: TD) {
    for (let index = 0; index < 100; index++) {
        const box = td.addRect(
            {
                width: Math.random() * 10,
                height: Math.random() * 10,
                depth: Math.random() * 10,
            },
            { color: new td.RandomColor() }
        );
        box.name = "" + index;
        box.position.x = (0.5 - Math.random()) * 100;
        box.position.z = (0.5 - Math.random()) * 100;
    }

    const floor = td.addRect(
        { width: 130, height: 1, depth: 130 },
        { color: new THREE.Color("#8f9ded") }
    );
    floor.translateY(-0.1);
}
